<template>
    <div @touchmove="flush" class="main">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in bannerList" :key="item.responseId">
                <img :src="item.adFocusPictureDetail.cover" alt="" />
            </van-swipe-item>
        </van-swipe>
        <div class="hotList">
            <div class="hot" @click="toRanking">
                <img src="./image/推荐.png" alt="" />
                <text>排行榜</text>
            </div>
            <div class="hot">
                <img src="./image/分类.png" alt="" />
                <text>分类</text>
            </div>
            <div class="hot">
                <img src="./image/听书.png" alt="" />
                <text>听书</text>
            </div>
        </div>
        <div class="advertising">
            <img src="./image/AD.png" alt="" />
        </div>
        <div class="hotRecommended">
            <text class="title">热门推荐</text>
            <ul class="list">
                <li class="hotBook" v-for="item in hotList" :key="item.albumId" @click="toDetail(item)">
                    <img :src="`//imagev2.xmcdn.com/${item.albumCoverPath}`" alt="">
                    <text class="name">{{ item.albumTitle }}</text>
                </li>
            </ul>
        </div>
        <div class="likeList">
            <text class="title">猜你喜欢</text>
            <ul class="list">
                <li class="like" v-for="item in likeList" :key="item.albumId" @click="toDetail(item)">
                    <img class="bigUrl" :src="`//imagev2.xmcdn.com/${item.albumCoverPath}`" alt="" />
                    <text>{{ item.albumTitle }}</text>
                    <div class="data">
                        <div class="num">
                            <img src="./icon/sound-wave.png" alt="" />
                            <span>{{ item.albumTrackCount }}</span>

                        </div>
                        <div class="num">
                            <img src="./icon/Iconfont-music.png" alt="" />
                            <span>{{ item.albumPlayCount }}</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="footer">
            <img src="./image/footer.png" alt="" />
            <text>© 2014-2023 喜马拉雅 版权所有</text>
        </div>
    </div>
</template>

<script lang="ts">
import { useRouter } from 'vue-router'
import { defineComponent } from 'vue'
import { useWindowSize } from '@vant/use'
export default defineComponent({
    name: 'homeList',
})
</script>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { getBannerListApi, getHotListApi, getLikeListApi } from '@/api/homeList'

const router: any = useRouter()


// 请求banner
const bannerList = ref<any>([])
const getBannerList = async () => {

    const res: any = await getBannerListApi()
    // console.log(res.moduleContent.focusImages);
    bannerList.value = res.moduleContent.focusImages

}

//请求热门推荐
const hotList = ref<any>()
const hotListPageNum = ref(1)
const hotListPageSize = ref(6)
const hotListSort = ref(1)
const getHotList = async () => {

    const res: any = await getHotListApi(
        hotListPageNum.value,
        hotListPageSize.value,
        hotListSort.value,
    )
    // console.log(res);
    hotList.value = res.albums

}


//请求猜你喜欢
const likeList = ref<any>([])
const likeListPageNum = ref(1)
const likeListPageSize = ref(20)
const likeListSort = ref(2)
const getLikeList = async () => {

    const res: any = await getLikeListApi(
        likeListPageNum.value,
        likeListPageSize.value,
        likeListSort.value,
    )
    // console.log(res);
    likeList.value = [...likeList.value, ...res.albums]

}

//下拉刷新
const flush = () => {


    // console.log();
    const { width, height } = useWindowSize()
    const windowScrollHeight =
        document.body.scrollHeight - document.documentElement.scrollTop
    // console.log(height.value,windowScrollHeight);
    let num = windowScrollHeight - height.value
    if (num < 1) {
        console.log(1111)

        likeListPageNum.value++
        getLikeList()
    }

}

//跳转详情
const toDetail = (item: any) => {
    // console.log(item);
    router.push(
        {
            name: "Detail",
            params: {
                id: item.albumId
            }
        }
    )
}

onMounted(() => {
    getBannerList()
    getHotList()
    getLikeList()
})
const toRanking = () => {
    // $route.push()
    router.push({ name: "Ranking" })
}
</script>

<style lang="less" scoped>
.main {
    position: relative;
}

.my-swipe {
    margin-top: 100px;

    .van-swipe-item {
        img {
            height: 150px;
            width: 100%;
        }
    }
}

.hotList {
    height: 100px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    .hot {

        display: flex;
        flex-direction: column;
        align-items: center;


        img {
            width: 40px;
            height: 40px;
            margin-bottom: 5px;

        }
    }
}

.advertising {
    img {
        height: 80px;
        width: 100%;
    }
}

.hotRecommended {
    display: flex;
    flex-direction: column;
    padding: 25px 15px;

    .title {
        font-size: 18px;
        font-weight: 700;
    }

    .list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between; // 替代原先的space-between布局方式

        .hotBook {
            display: flex;
            flex-direction: column;
            width: 100px;
            margin: 5px 0;
            flex: 1;
            align-items: center;
            width: calc((100% - 10px) / 3);  // 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
            min-width: calc((100% - 10px) / 3); // 加入这两个后每个item的宽度就生效了
            max-width: calc((100% - 10px) / 3); // 加入这两个后每个item的宽度就生效了
            &:nth-child(3n) { // 去除第3n个的margin-right
                margin-right: 0;
            }
            img {
                width: 100px;
                height: 100px;
                border-radius: 10px;
            }

            .name {
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }

        }
    }
}

.likeList {
    display: flex;
    flex-direction: column;
    padding: 25px 15px;

    .title {
        font-size: 18px;
        font-weight: 700;
    }

    .list {
        display: flex;
        flex-direction: column;
        margin-top: 20px;

        .like {
            display: flex;
            position: relative;
            margin-bottom: 30px;

            .bigUrl {
                width: 100px;
                height: 100px;
                border-radius: 10px;
                margin-right: 20px;
            }

            .data {
                position: absolute;
                bottom: 10px;
                left: 120px;
                display: flex;

                .num {
                    margin-right: 20px;
                    display: flex;
                    align-items: center;

                    img {
                        margin-right: 5px;
                    }
                }
            }
        }
    }
}

.footer {
    background-color: #e8e8e6;
    display: flex;
    flex-direction: column;
    align-items: center;

    img {
        margin: 0px 0 10px 0;
        width: 120px;
        height: 40px;
    }

    text {
        margin-bottom: 10px;
        color: #7f9ac2;
    }
}
</style>
